<template>
  <div class="appointment_nav">
    <div class="nav" v-for="(item, index) in category" :key="index" @click="toProjectList(item.id)">
      <div class="imageBox">
        <img :src="item.thumb" alt="" />
      </div>
      <div class="txt">{{ item.name }}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    category: {
      type: null
    }
  },
  data() {
    return {};
  },
  methods: {
    toProjectList(id) {
      this.$router.push(this.fun.getUrl("ProjectList", { category_id: id }));
    }
  }
};
</script>
<style lang="scss" scoped>
.appointment_nav {
  padding: 1.19rem 1.31rem 0 1.31rem;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  .nav {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    flex-direction: column;
    margin-right: 2.59rem;
    margin-bottom: 0.87rem;
    .imageBox {
      width: 3.25rem;
      height: 3.25rem;
      border-radius: 50%;
      img {
        width: 3.25rem;
        height: 3.25rem;
        border-radius: 50%;
      }
    }
  }
  .nav:nth-child(4n) {
    margin-right: 0;
  }
  .txt {
    font-size: 0.81rem;
    color: #000000;
    line-height: 0.94rem;
    margin-top: 0.56rem;
    width: 3.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
